<template>
	<view class="movie-detail">
		<!-- 顶部标题 -->
		<view class="movie-title">
			<text>{{movieInfo.title}}</text>
		</view>
		
		<!-- 电影信息区域 -->
		<view class="movie-content">
			<!-- 左侧海报 -->
			<view class="poster">
				<u-image
					:src="movieInfo.coverUrl"
					width="280rpx"
					height="400rpx"
					radius="8"
				></u-image>
			</view>
			
			<!-- 右侧信息 -->
			<view class="info">
				<view class="info-item">
					<text class="label">导演：</text>
					<text class="value">{{movieInfo.director}}</text>
				</view>
				<view class="info-item">
					<text class="label">主演：</text>
					<text class="value">{{movieInfo.actors}}</text>
				</view>
				<view class="info-item">
					<text class="label">语言：</text>
					<text class="value">{{movieInfo.language}}</text>
				</view>
				<view class="info-item">
					<text class="label">上映时间：</text>
					<text class="value">{{movieInfo.releaseDate}}</text>
				</view>
				<view class="info-item">
					<text class="label">片长：</text>
					<text class="value">{{movieInfo.duration}}分钟</text>
				</view>
				<view class="info-item">
					<text class="label">又名：</text>
					<text class="value">{{movieInfo.originalTitle}}</text>
				</view>
			</view>
		</view>
		
		<!-- 评分区域 -->
		<view class="rating-section">
			<text class="rating-title">电影评分</text>
			<view class="rating-content">
				<text class="rating-score">{{movieInfo.rating}}</text>
				<u-rate :value="movieInfo.rating/2" readonly size="20"></u-rate>
			</view>
		</view>
		
		<!-- 购票按钮 -->
		<view class="buy-ticket">
			<u-button 
				type="primary" 
				text="立即购票" 
				@click="buyTicket"
				:customStyle="{
					width: '90%',
					height: '80rpx',
					borderRadius: '40rpx'
				}"
			></u-button>
		</view>
		
		<!-- 评论列表 -->
		<view class="comment-section">
			<view class="comment-header">
				<text class="section-title">观影评论</text>
				<text class="comment-count">({{commentList.length}}条)</text>
			</view>
			
			<view class="comment-list">
				<view class="comment-item" v-for="(item, index) in commentList" :key="index">
					<view class="user-info">
						<u-avatar :src="item.avatar" size="60"></u-avatar>
						<view class="user-detail">
							<text class="username">{{item.username}}</text>
							<u-rate :value="item.rating/2" readonly size="15"></u-rate>
						</view>
						<text class="comment-time">{{item.createTime}}</text>
					</view>
					<view class="comment-content">
						{{item.content}}
					</view>
				</view>
			</view>
			
			<!-- 暂无评论提示 -->
			<view class="no-comment" v-if="commentList.length === 0">
				<text>暂无评论</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			API: getApp().globalData().API,
			movieInfo: {
				title: '',
				coverUrl: '',
				director: '',
				actors: '',
				type: '',
				region: '',
				language: '',
				releaseTime: '',
				duration: '',
				alias: '',
				rating: 0
			},
			commentList: []
		}
	},
	methods: {
		getMovieDetail(movieId) {
			let that = this
			uni.request({
				url: that.API + '/movies/getMovieById',
				data: {
					movieId: movieId
				},
				success(res) {
					that.movieInfo = res.data.data
				}
			})
		},
		buyTicket() {
			uni.navigateTo({
				url: `/pages/choosecinema/choosecinema?id=${this.movieInfo.movieId}`
			})
		},
		// 获取电影评论
		getMovieComments(movieId) {
			let that = this
			uni.request({
				url: that.API + '/reviews/getReviewsByMovieId',
				data: {
					movieId: movieId
				},
				success(res) {
					let list = res.data.data;
					for(let i = 0;i<list.length;i++){
						if(list[i].username == 'null'|| list[i].username == null){
							list[i].username = '未知昵称'
						}
					}
					that.commentList = list
				}
			})
		}
	},
	onLoad(options) {
		this.getMovieDetail(options.id)
		this.getMovieComments(options.id)
	}
}
</script>

<style lang="scss">
.movie-detail {
	min-height: 100vh;
	background-color: #fff;
	padding: 30rpx;
	
	.movie-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}
	
	.movie-content {
		display: flex;
		margin-bottom: 40rpx;
		
		.poster {
			margin-right: 30rpx;
		}
		
		.info {
			flex: 1;
			
			.info-item {
				margin-bottom: 16rpx;
				font-size: 26rpx;
				
				.label {
					color: #666;
				}
				
				.value {
					color: #333;
				}
			}
		}
	}
	
	.rating-section {
		margin-bottom: 40rpx;
		
		.rating-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.rating-content {
			display: flex;
			align-items: center;
			
			.rating-score {
				font-size: 48rpx;
				color: #ff9900;
				margin-right: 20rpx;
			}
		}
	}
	
	.buy-ticket {
		display: flex;
		justify-content: center;
		margin-top: 60rpx;
	}
	
	.comment-section {
		margin-top: 40rpx;
		padding: 0 20rpx;
		
		.comment-header {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			
			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
			
			.comment-count {
				font-size: 24rpx;
				color: #999;
				margin-left: 10rpx;
			}
		}
		
		.comment-list {
			.comment-item {
				padding: 20rpx 0;
				border-bottom: 1rpx solid #eee;
				
				.user-info {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
					
					.user-detail {
						flex: 1;
						margin-left: 20rpx;
						
						.username {
							font-size: 28rpx;
							color: #333;
							margin-bottom: 6rpx;
							display: block;
						}
					}
					
					.comment-time {
						font-size: 24rpx;
						color: #999;
					}
				}
				
				.comment-content {
					font-size: 26rpx;
					color: #666;
					line-height: 1.6;
				}
			}
		}
		
		.no-comment {
			text-align: center;
			padding: 40rpx 0;
			color: #999;
			font-size: 28rpx;
		}
	}
}
</style>